<template>
  <div
    class="app-wrapper"
    :class="{ 'sidebar-collapse': isSidebarCollapse, 'sidebar-hidden': isSidebarHidden }"
  >
    <app-header v-show="layoutVisible" :app-brand="appBrand"></app-header>
    <div class="main-wrapper" :class="{ 'p-0': !layoutVisible }">
      <sidebar
        v-show="layoutVisible"
        background-color="#fff"
        text-color="#333"
        box-shadow
        class="credit-app-aside"
      ></sidebar>
      <app-main box-shadow></app-main>
    </div>
  </div>
</template>
<script>
import AppHeader from '@/cadmin/components/appLayout/AppHeader'
import AppMain from '@/components/Layout/AppMain'
import Sidebar from '@/components/Layout/Sidebar'
import { STORAGE_SIDEBAR_OPEN } from '@/common/plugins/constant'

export default {
  components: {
    AppHeader,
    AppMain,
    Sidebar,
  },
  props: {},
  data() {
    return {
      appBrand: '管理后台',
    }
  },
  computed: {
    isSidebarCollapse() {
      return !this.$store.getters.sidebar.collapse
    },
    isSidebarHidden() {
      return !this.$store.getters.sidebar.visible
    },
    layoutVisible() {
      return this.$route.meta.layout !== false
    },
  },
  watch: {},
  created() {
    this.$store.dispatch(
      'toggleSidebarCollapse',
      localStorage.getItem(STORAGE_SIDEBAR_OPEN) !== 'false'
    )
  },
  mounted() {},
  methods: {},
}
</script>
<style scoped lang="scss">
.app-wrapper {
  position: relative;
}

.main-wrapper {
  padding-top: $header-height;
  min-height: 100vh;
}

.credit-app-aside {
  @include scrollbar-theme($gray-300);
}
</style>
